<template>
  <div>
    <van-uploader 
        v-model="list"
        :max-count="maxCount"
        :max-size="1024 * 1024 * 5"
        @oversize="showToast('图片大小不能超过5MB')"
        :before-read="beforeRead"
        multiple>

    </van-uploader>
  </div>
  
</template>

<script>
import {showToast} from "vant";
import {ref} from "vue";
export default {
  name: "ImgUploader",
  props: {
    maxCount: {
      type: Number,
      default: 9
    }
  },
  setup(props){
    const list = ref([])
    const imageFormat = /image\/(png|jpg|jpeg)$/
    const beforeRead = (file) => {
      // console.log(file);
      if(!imageFormat.test(file.type)){
        showToast('请上传 jpg/jpeg/png 格式图片')
        return false
      }
      return true
    }
    // const afterRead = (file) => {
    //   console.log(file);
    //   console.log(list);
    // }
    // const beforeDelete = (file,{index}) => {
    //   return true
    // }
    return {
      list,
      showToast,
      beforeRead,
    }
  },
  methods: {
    clearImgList(){
      this.list = []
    },
    init(imgs){
      this.list.push(...imgs)
    },
    getImgIdList(){
      return this.list.filter(item=>{
        return !!item.imgId;
      }).map(item=>{return item.imgId})
    },
    getFileList(){
      return this.list.filter(item=>{
        return !item.imgId;
      }).map(item=>{return item.file})
    }
  }
}
</script>

<style scoped>

</style>